<template>
    <el-form ref="ruleFormRef" :model="smsFormData" status-icon :rules="Smsrules" label-width="55px" class="demo-smsFormData">
        <el-form-item label="手机号" prop="phone" class="phone-form-item">
            <el-input v-model="smsFormData.phone" />
            <span class="captcha-svg">
                <button class="captcha-button" @click="sendSms">{{desc}}</button>
            </span>
        </el-form-item>
        <el-form-item label="验证码" prop="verification" class="verification-form-item">
            <el-input v-model="smsFormData.verification" type="input" autocomplete="off" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
// 业务：
  // 1、修改表单注入的数据以及prop
  // 2、给smsLogin这个组件添加自己的表单form校验规则


import { reactive, ref,onUnmounted } from 'vue'
import {Smsrules,useSubmitForm} from "../../composition/login/validate"
// 以内引入接口
import * as api from "@/api/users"
import { useRouter } from 'vue-router';
// 引入消息提示
import { ElMessage } from 'element-plus'
// 引入store
import {useUser} from "@/store/users"

// 引入loading加载框
import { ElLoading } from 'element-plus'
// 使用store
let userStore = useUser()

// 使用路由
let router = useRouter()

const ruleFormRef = ref()
// 注入到表单的数据
const smsFormData = reactive({
  phone: '',
  verification: '',
})

// 声明loadingInstance，用户存储loading动画实例
let loadingInstance = null


// 表单校验成功之后回调的方法
let validateSuccess = async ()=>{
 
    // console.log('校验成功')

    // 发起登录请求的时候就要加载loading加载框
   loadingInstance = ElLoading.service({
      text:"正在登入...",
      background:'rgba(0,0,0,.4)'
    })
  try{
    // 发送短信登录的请求
    let res = await api.smsApi(smsFormData.verification);
    console.log(res)

    // 关闭加载动画
    loadingInstance.close()

    // 存储token
    sessionStorage.setItem('myx-token',res.data.token)
    // 存储用户信息
    userStore.$patch((state)=>{
      state.userInfo.push(res.data.userInfo)
      console.log(state.userInfo)
    })
    
    // 页面要跳转
    router.push("/")

    
  }catch(e){
    console.log(e)

    // 请求失败也要关闭加载动画
    loadingInstance.close()
  }
}

// 表单校验失败之后回调的方法
let validateFailed = ()=>{
    console.log('校验失败')
}


// 使用submitForm
let submitForm = useSubmitForm(validateSuccess,validateFailed)

// 测试获取手机验证码接口
// let getSmsCode = () =>{

// }



// 短信登入流程
  // 1、输入手机号，点击发送按钮，获取短信验证码
    // 短信验证码需要进行倒计时提示
    // 手机验证码同一个手机，一分钟只能发送一次，一天一个手机号只能发6次
  // 2、输入短信验证码，进行登入请求
    // 声明一个响应式变量，改变
  
  let desc = ref('获取验证码')
  // 引用定时器，便于组件卸载的时候，清除定时器
  let timeDownInterval = null


  // 处理用户频繁点击的问题
  // 应用开关的思路
  // 初始值用户未点击
  let isClick = false;



  let sendSms = async  () => {
    if(!isClick){
      
      // 获取短信验证码的请求
      try{
        let res = await api.getSmsCode(smsFormData.phone);
        // console.log(res)

        // 给消息提示
        ElMessage({
          message: '短信验证码发送成功',
          type: 'success',
        })

        // 调用倒计时
        timeDownInterval = timeDown(60,desc,'秒后重新发送','点击发送',
        ()=>{
          // 让点击状态isClick恢复到未点击
          isClick = false
        })

      }catch(e){
        // console.log(e)
        // 重置开关
        isClick = false
        ElMessage({
          message: e,
          type: 'error',
        })
        return 
      }
    }
    // 标记is已经被点击
    isClick = true
  }
    

  // 短信倒计时的方法
  /**
   * 
   * @param {number} timer 倒计时的时间
   * @param {Object} param 需要变更的响应式变量
   * @param {String} msg 倒计时秒数的文字
   * @param {String} endMsg 倒计时结束后，回显的文字
   * @param {Function} cb 倒计时结束之后回调的函数
   */

  //  封装的思路就是，让使用能够变得简单，复杂的逻辑放在函数内部

  let timeDown = (timer = 5,param,msg,endMsg,cb) => {
    // 实现思路，核心就是间隔定时器
    let count = timer
    // 一调用倒计时函数，就是现实倒计时的秒数
    param.value = (count+"").padStart(2,0) + msg;
    
    let interval = setInterval(()=>{
      
      count--
      // console.log(990090)
      if(count <= 0){
        // 清除定时器
        clearInterval(interval)
        // 倒计时结束
        param.value = endMsg
        // 回调传入的函数
        cb && cb()
        return 
      }
      param.value = (count+"").padStart(2,0) + msg;
    },1000)
    // 返回定时器的引用
    return interval
  }

  // 组件卸载钩子
  onUnmounted(()=>{
    // 卸载定时器
    // console.log('组件被卸载了')
    if(timeDownInterval) clearInterval(timeDownInterval)
  })

// 字符串.padStart()  第一个参数是位数，第二个参数补上的数字
</script>


<style lang="less" scoped>
.phone-form-item,.verification-form-item{
  :deep(.el-form-item__label){
    color: #fff !important;
  }
  
}

.verification-form-item{
    .el-input{
    width: 250px;
    // :deep() .el-input_inner{
    //   color: red;
    // }
  }
}
.el-button{
  width: 250px;
}

.captcha-svg{
    background: #fff;
    display: inline-block;
    height: 32px;
    // width: 100px;
    text-align: center;
    cursor: pointer;
    border: 0;
    border-radius: 0 5px 5px 0;
    flex: 1;
}

.captcha-button{
    border: none;
    // outline-color: none;
    background: 0;
    // font-weight: 900;
    cursor: pointer;

    &:hover {
      color: #409EFF;
    }
}
.phone-form-item {
  display: flex;
  width: 305px;

  .el-input{
    width: 140px;
    
    
  }
  .el-input :deep(.el-input__wrapper) {
    background-color: #FFFFFF;
    box-shadow: 0 0 0 0;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
  }
}

.el-form-item{
  :deep(.el-form-item__error){
    color: #fff !important;
  }
}
</style>